
/*
	Design by Free CSS Templates
	http://www.freecsstemplates.org
	Released for free under a Creative Commons Attribution 2.5 License
*/

/* Basic */

*
{
	margin: 0em;
	padding: 0em;
}

h1,h2,h3,h4,h5,h6
{
	color: #000000;
}

body
{
	font-family: "Trebuchet MS", sans-serif;
	 background: url("images/youtube_back.png") repeat scroll 0 0 transparent;
	color: #7a7a7a;
	font-size: 11pt;
}

a
{
	color: #3B5998;
	text-decoration: none;
}

a:hover
{	
	text-decoration: underline;
}

/* Outer */

#outer
{
	margin: 2.5em 3.0em 1.5em 3.0em;
}

/* Header */

#header
{
	padding: 0em 1.5em 0em 1.5em;
	height: 3.4em;
	width: 15em;
	float: left;
	position: relative;
	background-color: #2D2D2D;
}

#header h1
{
	position: absolute;
	bottom: 0.6em;
	font-size: 1.5em;
	letter-spacing: 0.1em;
}

#header h1 a
{
	color: #fff;
	text-decoration: none;
}

#header h2
{
	position: absolute;
	bottom: 1.1em;
	color: #FFFFFF;
	font-size: 0.8em;
}

/* Menu */

#menu
{
	background-color: #2D2D2D;
	height: 3.4em;
	margin-left: 18em;
	position: relative;
}
#menu .user-opt{
	float: right;
	padding: 1em;
}
.user-opt ul {
	list-style: none !important;
	margin-left: 2em !important;
}
.user-opt li {
	position: relative;
}
#menu ul
{
	list-style: none;
	/*position: absolute;*/
	top: 3.3em;
	margin-left: 1.5em;
}

#menu li
{
	display: inline;
	border-left: dotted 1px #848484;
	padding-left: 0.8em;
}

#menu li.first
{
	border-left: 0px;
	padding-left: 0em;
}

#menu li a
{
	text-decoration: none;
	color: white;
	font-weight: bold;
	padding: 0.8em;
	margin-right: 0.8em;
	font-size: 0.9em;
}

#menu li a:hover
{
	background: #AF0A0A url('images/a4.gif') bottom left repeat-x;
	color: #fff;
}

/* Content */

#content
{
	position: relative;
	margin-top: 1px;
	margin-left:1em;
	padding-top: 0em;
}

#content p
{
	line-height: 1.6em;
}

#content h2
#content h2
{
	font-size: 1.5em;
}

#content h3
{
	font-size: 1.1em;
}

#content h2,h4,h5,h6
{
	padding-bottom: 0.2em;

}
span.job-title {
	color:#3B5998;
	font-size: 0.7em;
}

#content h3 {
	margin-bottom: 0.8em;
}
#content h7
{
	font-size: 1.1em;
	color: #0000FF;
	padding-bottom: 0em;
	margin-bottom: 0em;
	border-bottom: dotted 1px #cacaca;
	background-color: #FF7F24;
}
#content ul { list-style-type: none; }


#content blockquote
{
	border-left: solid 0.8em #cacaca;
	padding: 0.5em 0em 0.5em 1.0em;
	margin-bottom: 1.5em;
	line-height: 1.6em;
}

#content blockquote p
{
	display: inline;
}

table { padding-top:10em; padding: 0.5em; margin-bottom: 0em; }
table th { text-align: left; font-weight: bold; padding: 0.5em; }
table td { padding: 0.5em; }
table tr.rowA { background-color: #f5f5f5; color: inherit; }
table tr.rowB { background-color: #FFFFFF; color: inherit; }

/* Primary Content */

#primaryContentContainer
{
	float: right;
	margin-left: -19em;
	width: 100%;
}

#primaryContent
{
	margin: 0em 0em 0em 18em;
	padding: 1.5em;
	border-left: dotted 1px #cacaca;
}

#primaryContent div.body_main {float:left; width:100%; }
/* top control*/
#primaryContent div.top_control { margin: 0em 0em 0em 0em; padding-bottom: 0.5em;  width: 100%; position:relative; overflow:hidden; }
.top_control ul.option_left { list-style-type:none; margin: 0em 0em 0em 0em; }
.top_control ul li { float: right; margin-right: 1.5em; }
.top_control ul li.current {color: #AF0A0A;}
.top_control ul li.left {float: left; }

/*top control assign task*/
div.new_ele { margin: 0em 0.5em 0em 0em; background-color:#F5F5F5; width:80%;}
div.new_ele table.group {border: dotted 0px #cacaca; padding:0em; margin-bottom:0em;}

/**************************************************************************************/
/* data in table style*/
#primaryContent div.tstyle_content {width : 100%; max-width:1440px; padding-top:0.2em; positive:relative; overflow:hidden;}
.tstyle_content div.list {margin-top: 0.5em; width: 90%; float:left;}
div.list a.add-new-task {float:right; position:relative;}
#content h8 { font-size: 1.1em; color: #0000FF; font-weight:bold;}

/*make div style table*/
.tstyle_content div.table_container {display:table; float:left; width: 60em;}
.tstyle_content .table_container div.row {display:table-row; width:100%;}

.tstyle_content .table_container div.row div.cell {display:table-cell; padding-right:0.2em;}
.row.title { background-color:#E9F4FF; font-weight:bold;}
.cell.priority {width:4.5em;}
.cell.status {width:5.5em;}
.cell.deadline {width:10em;}

.cell .options {float:right; max-width:20em; position:relative; z-index:20; padding-right:1em; padding-top:0.5em;}
.options a {color:#fff;}
.options img.icon1 {background:url('images/symbol.png') no-repeat -80px -120px; height:12px; width:12px; display:block;}
.options img.icon1:hover {background:url('images/symbol.png') no-repeat -100px -120px; height:12px; width:12px; display:block;}

/*Note may be deleted above*/
div.tstyle_content table {float:left; width: 100%;}
table td div.options {float:right; max-width:20em; position:relative; z-index:20;}
table td div.options a {color:#fff;}
td div.options img.icon1 {background:url('images/symbol.png') no-repeat -80px -120px; height:12px; width:12px; display:block;}

.title {background-color: #F5F5F5; color: #0000FF;}

div.sliding {background-color:#333333; width:10em; height:8em; position:absolute; overflow:hidden; z-index:20; display:none;}
.sliding ul {width: 100%;  display:block; padding: 0.5em;}
.sliding ul li {display:block; color: #fff;	width:100%;}

div.tstyle_content table tr.rowC { background-color: #5A9E6C; color: #000; font-weight:bold;}
table tr.row.edit-task {background-color:#E9F4FF; border: 1px solid #E5E5E5; color: #000;}
.edit-task .wrap-edit-task {display:block; width:90%;}

label {width:97%;}
label {display:block; margin: 0 0 0.5em;}
label strong {font-weight:bold; display:block;}
label input {width:100%;}
input.small {width:75%;}
label input.last {float:right;}
label textarea {width:100%;}
label.save {float:right; width:auto;}
label input, select {
	height: 2em;
}

div.add-list .options {
	float:left;
	width:100%;
}
div.add-list input[type="text"].coop {
	height: 2em;
	display: block;
	float:left;
}
div.add-list img {
	float:left;
}
div.add-list .sliding {
	width: 75%;
	top: 2em;
}
/*name*/
#name  {
	overflow:hidden;
	width:97%;
}
#name label, strong {
	display: inline-block;
	width:100%;
}
#name label.first-name {
	width: 46%;
	float: left;
}
#name label.last-name {
	width: 46%;
	float: right;
}
/*name*/

/*birthday*/
#birthday {
}
#birthday  label, strong{
	display: inline-block;
	width:100%;
}
#birthday label.month {
	width: 30%;
	margin-right:1em;
}
#birthday label.day {
	width: 30%;
	margin-right:1em;
}
#birthday label.year {
	width: 29%;
	margin-right:1em;
}

#project-prop {
	width:100%;
	display: inline-block;
}
.bottom {vertical-align:text-bottom;}
.quarter {width:23%; padding-right:0.2em; float:left;}

div.tstyle_content div.wrap_option {float:right; width:15em; padding-top:0.3em; border: 1px dotted #CACACA;}
div.tstyle_content div.wrap_option div.option {float:right; width:80%; padding-top:0.3em;}
div.tstyle_content div.wrap_option div.direction { float:right; width:10px;} 
table div.container { width:100%; height:1em; border:1px solid black;}


/**************************************************************************************/
/*settings*/
div.left-collum {float:left; width:25%;}
div.right-collum {float:right; width:75%;}
div.mid-collum { margin-top: 1em; text-align:center;}
div.str-setting {
	max-width: 60em; 
	width:80%;
	margin-top:1em;
	background-color:#FFFFFF;
	overflow:hidden;
}
.str-setting input {width:95%;}
.str-setting textarea {width:95%;}
.str-setting .set-ele { width:100%; margin-bottom:0.5em; overflow:hidden; height:1%; display:block;}

div.trigger_slidding {}
/* Secondary Content */
div.sliding1 {width:100%; height:8em; padding-top:1em; position:relative; overflow:hidden; display:block; z-index:20;}
div.sliding1 ul {width: 10em; top:0px; background-color:#333333; position:absolute; display:none}
div.sliding1 ul li {display:block;}


/****************************************************************************************/
/*hot tips*/
.tstyle_content div.big_left {width:75%; padding-right:1.5em; float:left; postition:relative; display:block;}
.tstyle_content div.small_right {width:20%; float:right; border-left-style:dotted;}
#primaryContent .big_left div.block {padding-bottom:1em;}
#primaryContent .big_left dd {width:50em; padding-top:0.2em;}
#primaryContent .big_left ul {width:50em; height: 3em; margin:0.2em 0 0.2em 0;}
#primaryContent .big_left ul.title {font-weight:bold;}
#primaryContent .big_left ul li {float:left; width:20%; margin-right: 0.2em; dipslay:inline; list-style-type:none;}

/***************************************************************************************/
/*calendar*/
div.calendar {width:95%; text-align:center;}

h2.calendar {text-align:center;}
.calendar .controller {margin:0 auto; width:10em;}
.calendar .controller a.pre {float:left; font-size:11pt; margin-top:0.3em;}
.calendar .controller a.next {float:right; font-size:11pt; margin-top:0.3em;}

.calendar .month-row { border-right: 1px solid #CCCCCC; border-top: 1px solid #CCCCCC; min-height: 100px;width: 100%;}
.calendar table {height:100%; padding:0; table-layout:fixed; width:100%; background-color:#FFFFFF; border-right: 1px solid #CCCCCC; border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC;}
.calendar table tbody {width:100%; padding:0;}
.calendar table tr {text-align:center; }
.calendar table td {border-left:1px solid #CCCCCC; padding:0; vertical-align:top; height:6em;}
.calendar table.header td {border-left:1px solid #CCCCCC; padding:0; vertical-align:top; height:1em; font-weight:bold;}
.calendar td:hover {background-color:#E9F4FF;}

.calendar td div.date {width:100%; text-align:right;}
div.date span {width:100%; float:right; padding-right:0.3em;}

.element {width:100%; text-align:left;}
.today {background-color:#E9F4FF;}
/**popup**/
.calendar div.menu-balloon-container {position:relative; z-index:100;}


/*balloon*/
.balloon {position:absolute; z-index:2000; color:#222;}
div.balloon-wrapper {
    background-color: #FFFFFF;
    position: absolute;
    width: 20em;
    z-index: 1000;
}
div.balloon-content {
    padding: 0.5em 1.2em;
}
div.balloon-pointer {
	position: relative;
	top:1.2em;
}
div.balloon-arrow {
	border-color: transparent white	 transparent transparent;
    left: -22px; 	
    margin: 0 auto;
    top:0;
    width:0;
    z-index:1112;	
}
div.balloon-arrow-border {
	border-color: transparent #CCCCCC transparent transparent;
    left: -24px;
    top: 0;
    z-index:1111;
}
.balloon-arrow, .balloon-arrow-border {
	border-width:12px;
	right: auto;
	cursor: pointer;
	position: absolute;
	border-style: solid;
}
.part {width:100%; text-align:left; margin-bottom:0.3em;}
.part label {float:left; width:100%; margin-bottom:0.1em; font-weight:bold;}
.part input {margin-bottom:0.1em; width:100%;}
.part input.deadline {width:50%; margin-right:0.5em;}
.part input.time {width:20%; float:right; margin-left:0.5em;}
.part select {margin-bottom:0.1em; width:100%;}
.part button.left {float:right; margin-left: 0.5em;}
.part.final {margin-top:1em; margin-bottom:3em;}

.done {background-color: #5A9E6C; color: #000;}

/*cell task*/
.cell {
	width: 12em;
	margin-right:0.5em;
	margin-bottom: 0.5em;
	padding:0.2em; 
	background-color:#FFFFFF;
	-moz-border-radius: 6px 6px 6px 6px;
    -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
    box-shadow: rgba(0,0,0,0.3) 0 1px 6px;
    -webkit-border-radius: 6px;
}
.cell.milestones {
	width : 22em;
	padding: 0.5em 0.5em 0.6em;
}
.cell .statistic {
	text-align: left;
	width: 100%;
	height:1em;
}
.cell div.comment {
	width:40px; float:left; margin-right:0.3em;
}
.cell div.people{
	width:40px; float:left; margin-right:0.3em;
}
.cell .date {
	float:right;
}
/*common*/
.additional {text-align:right;}
.late {background-color:yellow !important;}
.done {background-color:green !important;}


/*sliding menu*/
.sli-container {
	position:relative;
	z-index: 20;
}

.single-box {
	margin: 0px auto;
	width: 600px;
}
.user-box {
	margin: 0px auto;
	width: 500px;
}
#secondaryContent
{
	position: relative;
	background-color:white;
	float: left;
	width: 15em;
	height: 100%;
	padding: 1.5em;
	border-right: solid 1px #cacaca;
}
#content .underground-background {
	position: absolute;
	z-index: -1;
	top: 0px;
	left:0px;
	background-color: #FFFFFF;
	width:18em;
	height: 100%;
}

/*top navigation*/
.top-navigation {
	width:100%;
	font-weight:bold;
}
.top-navigation  .first-class, .second-class{
	width:100%;
}
.top-navigation .second-class {
	background-color : #000000;
}
.top-navigation ul {
	list-style-type:none;
	overflow:hidden;
	margin:0;
	padding:0;
}
.top-navigation li {
	float: left;
	padding:0.5em ;
}
.top-navigation a
{
	text-align: center;
}
.top-navigation li.active{
	background-color : #000000;
	border: 1px solid #E2E2E2;
	border-bottom: none;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
}
/*sidebar*/

.profile-picture {
	max-height: 180px;
	width: 100%;
	margin-bottom: 4em;
}
.profile-picture img {
	max-width:15em;	
}

.navigation {
	background-color: #FFFFFF;
	-moz-border-radius: 6px 6px 6px 6px;
	-webkit-border-radius: 6px;
	padding: 0.2em 0 0.4em;
	margin-bottom: 1em;
}
.friend {
	padding: 0.4em 0 0.3em;	
}
.friend img {
	width:50px;
	height: 50px;
	float: left;
	margin-right: 0.4em;
}
.friend li {
	line-height: 55px;
	margin-bottom: 0.4em;
}

/*Decor*/
.navigation li:hover{
	background-color: #d8dfea;
}
.navigation li.active {
	background-color: #d8dfea;
}
.navigation li , .title{
	padding: 0 1em;
}
.navigation a {
	font-weight: bold;
}
a i.comment {
	background:url('images/symbol.png') no-repeat -80px -120px; 
	height:12px; 
	width:12px;
	margin-top: 0.4em;
	margin-right:0.5em;
	float:left;	
	display:block;
}
a i.people {
	background:url('images/symbol.png') no-repeat -40px -120px; 
	height:12px; 
	width:12px;
	margin-top: 0.4em;
	margin-right:0.5em;
	float:left;	
	display:block;
}
.statistic a span{
	margin-top:0.1em;
	float:left;
}
.box-skin {
	background-color:white;
	border: 1px solid #CACACA;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-moz-border-radius: 6px 6px 6px 6px;
    -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
    box-shadow: rgba(0,0,0,0.3) 0 1px 6px;
    -webkit-border-radius: 6px;
}
.button {width:4em; height:2em; margin-right: 1em;}
.wrap {
	padding: 0.5em;
	overflow: hidden;
}
.wrap-project {
	overflow: hidden;
	padding: 2em 1em 2em;
}
.wrap-title
{
	margin-top: 1.5em;
	border-top: solid 1px #CACACA;
	border-bottom: solid 1px #CACACA;
	overflow: hidden;
	padding: 0.5em;
	margin-bottom: 0.3em;
	background-color: #F5F5F5;
}
.typo-impo {
	color:white;
	font-weight:bold;
}

i.icon-tri-open {
	background:url('images/symbol.png') no-repeat -80px -120px; height:15px; width:15px;
}
#secondaryContent  li.child {padding-left: 2em;}
#secondaryContent ul li.grand {padding-left: 2.5em;}
/* Footer */

#footer { margin-top: 1.0em; border-top: dotted 1px #cacaca; padding: 1.5em; font-size: 0.9em; text-align: center; }

.clear
{
	clear: both;
}
.center {
	margin: 0 auto;
}
.clearfix:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
}
.clearfix {display: inline-block;}
